<!DOCTYPE html>
<html>

<head>
	<title>Preferences | Min</title>
	<link rel="stylesheet" href="../../css/base.css" />
	<link rel="stylesheet" href="settings.css" />
	<link rel="stylesheet" href="../../ext/font-awesome-4.4.0/css/font-awesome.min.css" />
</head>

<body>
	<div class="banner yellow-background" id="restart-required-banner" hidden>
		<div class="container padding">
			<i class="fa fa-info-circle"></i> You need to restart to apply these changes.
		</div>
	</div>

	<div class="hero short-hero blue-gradient-background">
		<div class="container padding">
			<h2>Preferences</h2>
		</div>
	</div>

	<div class="spacer"></div>
	<div class="container padding" id="privacy-settings-container">
		<h3>Content Blocking</h3>

		<div class="setting-section">
			<input type="checkbox" id="checkbox-block-trackers" />
			<label for="checkbox-block-trackers">Block trackers and ads</label>
			<div class="light-fade setting-secondary-label">Based on EasyList and EasyPrivacy, without element hiding rules. Created by <a target="_blank" href="https://easylist.adblockplus.org/">The EasyList authors</a> - <a target="_blank" href="https://creativecommons.org/licenses/by-sa/3.0/legalcode">view license</a>.</div>
		</div>

	</div>

	<div class="spacer">
	</div>

	<div class="spacer"></div>
	<div class="container padding" id="appearance-settings-container">
		<h3>Appearance</h3>

		<div class="setting-section">
			<input type="checkbox" id="checkbox-dark-mode" />
			<label for="checkbox-dark-mode">Enable dark mode</label>
		</div>

	</div>

	<div class="spacer">
	</div>

	<div class="container padding" id="search-engine-settings-container">
		<h3>Search Engine</h3>

		<label for="defaultSearchEngine">Choose a default search engine: &nbsp;</label>
		<select id="default-search-engine" name="defaultSearchEngine" style="min-width: 225px"></select>

		<div class="light-fade" style="padding-top:0.4em">Set DuckDuckGo as the default search engine to see instant answers in the searchbar.</div>
	</div>

	<div class="spacer"></div>
	<div class="container padding" id="keymap-settings-container">
		<h3>Keyboard Shortcuts</h3>
		<div class="light-fade">Type "mod" to use the command or control key.</div>

		<div class="setting-section">
			<ul id="key-map-list" class="setting-section"></ul>
		</div>
	</div>

	<script src="../../ext/Dexie.min.js"></script>
	<script src="../../js/util/database.js"></script>
	<script src="../../js/util/defaultKeyMap.js"></script>
	<script src="../../js/util/settings.js"></script>
	<script src="../../js/util/searchEngine.js"></script>
	<script src="../../js/util/theme.js"></script>
	<script src="settings.js"></script>
</body>

</html>
